<template>
    <el-card style="border-radius: 10px;">
        <div slot="header" class="clearfix">
            <span style="font-weight: bold;">卡片名称</span>
        </div>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px"
            class="demo-ruleForm">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="类别：">
                        <div slot="label">类别</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རིགས་</div>
                        <template>
                            <el-select v-model="ruleForm.type" style="width: 300px" placeholder="请选择">
                                <el-option v-for="item in typeList" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </template>
                    </el-form-item>

                    <el-form-item label="品名：" v-if="ruleForm.type != '劳务'">
                        <div slot="label">品名</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རྫས་མིང་་</div>
                        <el-input placeholder="请输入内容" v-model="ruleForm.inputsName" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="品名：" v-if="ruleForm.type == '劳务'">
                        <div slot="label">品名</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">རྫས་མིང་་</div>
                        <el-input placeholder="请输入内容" v-model="ruleForm.laborBreedName" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="投入品照片：">
                        <div slot="label">投入品照片</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གཏོང་དངོས་འདྲ་པར་</div>
                        <el-upload class="upload-poster" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :on-change="imgPreview" :auto-upload="false">
                            <img v-if="inputsImg" :src="inputsImg" class="avatar" />
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
                    <el-form-item label="规格：" v-if="ruleForm.source != '自产' && ruleForm.type != '劳务'">
                        <div slot="label">规格</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">ཚད་གཞི་་</div>
                        <el-input placeholder="请输入" v-model="ruleForm.spec" style="width: 200px">
                            <template slot="append">
                                <el-select v-model="ruleForm.specUnits" placeholder="单位སྡེ་ཚན།"
                                    style="width: 80px !important">
                                    <el-option v-for="item in unitsList" :key="item.id" :label="item.name"
                                        :value="item.name"></el-option>
                                </el-select>
                            </template>
                        </el-input>
                        <!-- <el-button style="margin-left: 20px" @click="toUntis">单位管理སྡེ་ཚན་དོ་དམ།</el-button> -->
                        <el-button style="margin-left: 20px" @click="toUntis">单位管理</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-form-item label="来源：" v-if="ruleForm.type != '劳务'">
                        <div slot="label">来源</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">འབྱུང་ཁུངས།</div>
                        <el-select placeholder="请输入内容" v-model="ruleForm.source" style="width: 300px">
                            <el-option v-for="item in sourceList" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="供应商名称：" v-if="ruleForm.source != '自产' && ruleForm.type != '劳务'">
                        <div slot="label">供应商名称</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">མཁོ་འདོན་ཚོང་པའི་མིང་
                        </div>
                        <template>
                            <div @click="changeSupply">
                                <el-input v-model="ruleForm.supplyName" style="width: 300px" value-key="id"
                                    placeholder="请选择"></el-input>
                                <!-- <el-select v-model="name" @change="changeSupply" style="width: 300px" value-key="id" placeholder="请选择">
                                <el-option v-for="item in supplyList" :key="item.id" :label="item.supplierName" :value="item"></el-option>
                            </el-select> -->
                            </div>
                        </template>
                    </el-form-item>
                    <el-form-item label="生产日期：" v-if="ruleForm.type != '劳务'">
                        <div slot="label">生产日期</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">ཐོན་སྐྱེད་ཀྱི་ཚེས་གྲངས་
                        </div>
                        <el-date-picker v-model="ruleForm.producedTime" type="date" value-format="yyyy-MM-dd" placeholder
                            style="width: 300px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="保质期：" v-if="ruleForm.type != '劳务'">
                        <div slot="label">保质期</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">སྤུས་ཚད་འགན་ལེན་དུས་ཡུན་
                        </div>
                        <el-input v-model="ruleForm.expirationDate" style="width: 275px"></el-input>
                        <span style="margin-left: 10px">月</span>
                    </el-form-item>
                    <el-form-item label="购买时间：" prop="buyTime" v-if="ruleForm.source == '购买' && ruleForm.type != '劳务'">
                        <div slot="label">购买时间</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">ཉོ་སྒྲུབ་དུས་ཚོད་་</div>
                        <el-date-picker v-model="ruleForm.buyTime" type="date" value-format="yyyy-MM-dd" placeholder
                            style="width: 300px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="单价：" prop="buyTime" v-if="ruleForm.source == '购买' && ruleForm.type != '劳务'">
                        <div slot="label">单价</div>
                        <el-input placeholder="请输入" v-model="ruleForm.price" style="width: 200px">
                            <template slot="append">元(kg)</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="总价：" prop="buyTime" v-if="ruleForm.source == '购买' && ruleForm.type != '劳务'">
                        <div slot="label">总价</div>
                        <el-input placeholder="请输入" v-model="ruleForm.totalPrice" style="width: 200px">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="订单号：" prop="buyTime" v-if="ruleForm.source == '购买' && ruleForm.type != '劳务'">
                        <div slot="label">订单号</div>
                        <el-input placeholder="请输入" v-model="ruleForm.orderNo" style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="劳务人数：" prop="buyTime" v-if="ruleForm.type == '劳务'">
                        <div slot="label">劳务人数</div>
                        <el-input placeholder="请输入" v-model="ruleForm.laborNum" style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="劳务单价：" prop="buyTime" v-if="ruleForm.type == '劳务'">
                        <div slot="label">劳务单价</div>
                        <el-input placeholder="请输入" v-model="ruleForm.laborPrice" style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="劳务总价：" prop="buyTime" v-if="ruleForm.type == '劳务'">
                        <div slot="label">劳务总价</div>
                        <el-input placeholder="请输入" v-model="ruleForm.laborTotalPrice" style="width: 200px">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="自产时间：" prop="buyTime" v-if="ruleForm.source == '自产' && ruleForm.type != '劳务'">
                        <div slot="label">自产时间</div>
                        <!--                      <div slot="label" style="line-height: 0px">མཛོད་ཁང་</div>-->
                        <el-date-picker v-model="ruleForm.buyTime" type="date" value-format="yyyy-MM-dd" placeholder
                            style="width: 300px"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="数量：" v-if="ruleForm.type != '劳务'">
                        <div slot="label">数量</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">གྲངས་འབོར་</div>
                        <el-input placeholder="请输入" v-model="ruleForm.totalNumber" style="width: 200px">

                            <template slot="append">
                                <el-select v-model="ruleForm.units" placeholder="单位" style="width: 80px !important">
                                    <el-option v-for="item in unitsList" :key="item.id" :label="item.name"
                                        :value="item.name"></el-option>
                                </el-select>
                            </template>
                        </el-input>
                        <el-button style="margin-left: 20px" @click="toUntis">单位管理</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="22">
                    <el-form-item label="备注" v-if="ruleForm.type != '劳务'">
                        <div slot="label">备注</div>
                        <div slot="label" style="line-height: 0px" v-show="$store.state.zangw == '1'">མཆན་འགྲེལ།་</div>
                        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item class="footerFixed" label-width="0px">
                <!-- <el-button type="primary" @click="submitrule('ruleForm')">提交འབུལ་བ་</el-button>
                <el-button @click="backPage">返回ཕྱིར་ལོག</el-button> -->
                <el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
                <el-button @click="backPage">返回</el-button>
            </el-form-item>

            <el-dialog title="供应商选择" :visible.sync="dialogTableVisible">
                <template>
                    <el-col :span="10" style="margin-left: 30px">
                        <el-form label-width="100px" label-position="left">
                            <el-form-item label="供应商名称">
                                <template>
                                    <el-input placeholder="请输入供应商名称" v-model="supplierNames"
                                        style="width: 180px"></el-input>
                                </template>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="10">
                        <el-form label-width="100px" label-position="left">
                            <el-form-item label="联系电话">
                                <template>
                                    <el-input placeholder="请输入联系电话" v-model="phones" style="width: 180px"></el-input>
                                </template>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="popupQuery">查询</el-button>
                    </el-col>
                </template>
                <el-table :data="supplyList">
                    <el-table-column property="supplierName" label="供应商名称" width="150" align="center"></el-table-column>
                    <el-table-column property="userName" label="联系人" width="200" align="center"></el-table-column>
                    <el-table-column property="phone" label="联系电话" align="center"></el-table-column>
                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" @click="changeSupplier(scope.row)">选择</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-form>
    </el-card>
</template>

<script>
import { inputs_save, unit_findByList, supplier_findByAll, inputs_findById, supplier_findByList } from '@/request/api';
import uploadImg from '../../../common/uploadImg';
export default {
    data() {
        return {
            supplierNames: '', //弹出层供应商名称
            phones: '', //弹出层联系人电话
            dialogTableVisible: false,
            labelPosition: 'right',
            name: '',
            file: '',
            inputsImg: '',
            ruleForm: {
                files: ''
            },
            typeList: [
                {
                    value: '肥料',
                    label: '肥料'
                },
                {
                    value: '农药',
                    label: '农药'
                },
                {
                    value: '劳务',
                    label: '劳务'
                },
                {
                    value: '其他',
                    label: '其他'
                }
            ],
            sourceList: [
                {
                    value: '购买',
                    label: '购买'
                },
                {
                    value: '自产',
                    label: '自产'
                }
            ],
            unitsList: [],
            supplyList: [],
            rules: {
                type: [{ required: true, message: '不能为空', trigger: 'change' }],
                source: [{ required: true, message: '不能为空', trigger: 'change' }],
                inputsName: [{ required: true, message: '不能为空', trigger: 'change' }],
                supplyName: [{ required: true, message: '不能为空', trigger: 'change' }],
                spec: [{ required: true, message: '不能为空', trigger: 'change' }],
                // buyTime: [{ required: true, message: '不能为空', trigger: 'change' }],
                totalNumber: [{ required: true, message: '不能为空', trigger: 'change' }]
            }
        };
    },
    mounted() {
        this.id = this.$route.query.id;
        if (this.id == undefined) {
        } else {
            inputs_findById(this.id).then((res) => {
                this.ruleForm = res.data;
                this.name = res.data.supplyName;
                if (this.ruleForm.inputsImg == '' || this.ruleForm.inputsImg == null) {
                    this.ruleForm.inputsImg = this.ruleForm.inputsImg;
                } else {
                    this.inputsImg = this.$store.state.plantImg + this.ruleForm.inputsImg;
                }
            });
        }
        this.init();
        this.init1()
    },
    methods: {
        //弹出层查询判断
        querys() {
            let datas = {
                supplierNames: this.supplierNames,
                phones: this.phones
            }
            supplier_findByList(datas).then((res) => {
                this.supplyList = res.data;
            })
        },
        //弹出层查询
        popupQuery() {
            // console.log(this.supplyList,'弹出层数据列表')
            // console.log(this.supplierNames,'弹出层供应商名称')
            // console.log(this.phones,'弹出层联系电话')

            this.querys()
        },
        //弹出层选择供应商
        changeSupplier(ele) {
            // console.log(ele)
            this.ruleForm.supplyId = ele.id;
            this.ruleForm.supplyName = ele.supplierName;
            this.ruleForm.userName = ele.userName;
            this.ruleForm.phone = ele.phone;
            this.dialogTableVisible = false
        },
        toUntis() {
            this.$router.push({
                path: '../unit'
            });
        },
        changeSupply(ele) {
            this.dialogTableVisible = true;
            // this.ruleForm.supplyId = ele.id;
            // this.ruleForm.supplyName = ele.supplierName;
            // this.ruleForm.userNam】e = ele.userName;
            // this.ruleForm.phone = ele.phone;
        },
        imgPreview(file, fileList) {
            this.inputsImg = URL.createObjectURL(file.raw);
            let fileName = file.name;
            let regex = /(.jpg|.gif|.png|.jpeg)$/;
            if (regex.test(fileName.toLowerCase())) {
                this.ruleForm.files = file.raw;
                this.ruleForm.inputsImg = file.name;
            } else {
                this.$message.error('请选择图片文件');
            }
        },
        backPage() {
            this.$router.go(-1);
        },
        init() {
            unit_findByList('').then((res) => {
                // if (res.code == 200) {
                this.unitsList = res.data;
                // }
            });
            supplier_findByAll('').then((res) => {
                // if (res.code == 200) {
                this.supplyList = res.data;
                // }
            });
        },
        init1() {

        },
        submitrule(formName) {
            if (this.ruleForm.source == '自产') {
                if (this.ruleForm.units == null || this.ruleForm.units == '') {
                    alert('数量单位为必填');
                    return false;
                }
            } else {
                if (this.ruleForm.units == null || this.ruleForm.units == '') {
                    alert('数量单位为必填');
                    return false;
                }
                if (this.ruleForm.specUnits == null || this.ruleForm.specUnits == '') {
                    alert('规格单位为必填');
                    return false;
                }
            }

            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let formdata = new FormData();
                    for (var a in this.ruleForm) {
                        if (this.ruleForm[a] == null || this.ruleForm[a] == 'null') {
                            this.ruleForm[a] = '';
                            formdata.append(a, '');
                        } else {
                            formdata.append(a, this.ruleForm[a]);
                        }
                    }
                    inputs_save(formdata).then((res) => {
                        this.$notify({
                            title: '提示',
                            message: '保存成功',
                            type: 'success',
                            duration: 1000
                        });
                        this.$router.go(-1);
                    });
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.el-upload--text {
    width: 180px;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
